<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>
    <div id="app">

    </div>
</body>

</html>
<script>
    //
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 0
            }
        },
        created() {

            // get 请求方式1  
            // this.getdata1();
            // get 请求方式2
            //this.getdata2()
            // post请求方式1
            // this.getdata3()
            // 处理多个并发请求,
            // this.getalldata()
            // 常规方式请求post
            // this.getdatanormal()
            // 常规方式请求 get
            this.getdatanormal1()
        },
        methods: {
            getdata1() {
                axios.get('https://api.i-lynn.cn/college?page=8').then(res => {
                    console.log(res);
                })
            },
            getdata2() {
                axios.get('https://api.i-lynn.cn/college', {
                    params: {
                        page: 3
                    }
                }).then(res => {
                    console.log(res);
                })
            },
            getdata3() {
                // 默认为json格式
                axios.post('https://api.i-lynn.cn/college', {
                    page: 4,
                    age: 20
                }).then(res => {
                    console.log(res);
                })
            },
            getalldata() {
                axios.all([axios.get('https://api.i-lynn.cn/college'), axios.get('https://api.i-lynn.cn/area')]).then(res => {
                    console.log(res);
                    // 进行弹窗操作
                })
            },
            getdatanormal() {
                axios({
                    method: 'post',
                    url: 'https://api.i-lynn.cn/area',
                    data: { // post 请求参数key 为data
                        firstName: 'Fred',
                        lastName: 'Flintstone'
                    },
                    headers: {
                        // 'Content-Type': 'application/json'
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    console.log(res);
                })
            },
            getdatanormal1() {
                axios({
                    method: 'get',
                    url: 'https://api.i-lynn.cn/area',
                    params: { // 注意: 当为get 请求, 参数key 为params
                        firstName: 'Fred',
                        lastName: 'Flintstone'
                    }
                }).then(res => {
                    console.log(res);
                })
            }


        }

    }).mount('#app')
</script>